<script setup>
    import { ref , defineEmits , defineProps, computed} from 'vue';

    // eslint-disable-next-line no-unused-vars
    const props = defineProps({
        dateInfos : {
            type : Object,
            require : true
        },
    });

    const selectedDays = ref({});
    const isActives = ref({});
    
    const emit = defineEmits(['selected-days']);

    function dealDay(year,month,day){
        const key = `${year}-${month}-${day}`;
        let tmpYear = selectedDays.value[year];
        if(tmpYear && tmpYear[month]){
            let tmpMonth = tmpYear[month];
            if(Object.prototype.hasOwnProperty.call(tmpMonth, day)){
                delete tmpMonth[day];
                isActives.value[key] = false;
            }else{
                selectedDays.value[year][month][day] = 1;
                isActives.value[key] = true;
            }
        }else{
            if(tmpYear){
                let tmpMonth = tmpYear[month];
                if(tmpMonth){
                    selectedDays.value[year][month][day] = 1;
                    isActives.value[key] = true;
                }else{
                    selectedDays.value[year][month] = {};
                    selectedDays.value[year][month][day] = 1;
                    isActives.value[key] = true;
                }
            }else{
                selectedDays.value[year] = {};
                selectedDays.value[year][month] = {};
                selectedDays.value[year][month][day] = 1;
                isActives.value[key] = true;
            }
        }
        // console.log(selectedDays.value);
    }

    function sendSelectedDays(){
        emit('selected-days',selectedDays.value);
        isActives.value = {};
        selectedDays.value = {};

    }

    function isActive(year, month, day){
        const key = `${year}-${month}-${day}`;
        if(isActives.value[key]){
            return isActives.value[key];
        }else{
            return false;
        }
    }

    //之前的结构，month类似year的一个成员变量，类似dateInfos.2023.10，不能被排序。
    //因此需要在year下生成一个数组，把monthData放到数组中.
    //monthData有两个成员变量，一个表示month，一个存储该month下的日期
    //vue3没有dict，所有dict都是类似一个对象以及成员变量，和成员变量的值。例如person = {age:10,sex:'男'}
    const sortedDateInfos = computed( () => {
        const tmp = {};
        const yearKeys = Object.keys(props.dateInfos);
        yearKeys.sort().forEach(year => {
            tmp[year] = [];
            // const monthKeys = Object.keys(props.dateInfos[year]).map(month => ({
            //     month:parseInt(month,10),
            //     days:props.dateInfos[year][month]
            // }));
            const monthKeys = Object.keys(props.dateInfos[year]);
            monthKeys.forEach(month => {
                tmp[year].push({month:parseInt(month,10),days:props.dateInfos[year][month]});
            });
            tmp[year].sort((a,b)=>a.month-b.month);
        });
        console.log(tmp);
        return tmp;
    });



</script>

<template>
    <div class="wrapper">
        <ul>
            <li v-for="(months,year) in sortedDateInfos" :key="year">
                <details close>
                    <summary>{{year}}年</summary>
                    <ul>
                        <li v-for="(monthData,monthIndex) in months" :key="monthIndex">
                            <details>
                                <summary>{{monthData.month}}月</summary>
                                <ul>
                                    <li v-for="(day,dayIndex) in monthData.days" :key="dayIndex">
                                        <summary @click="dealDay(year,monthData.month,day)" :class="{'bg-highlight': isActive(year, monthData.month, day)}">{{day}}日</summary>
                                    </li>
                                </ul>
                            </details>
                        </li>
                    </ul>

                </details>
            </li>
        </ul> 
        <button class="neon-btn" @click="sendSelectedDays()">确定</button>
    </div>
</template>

<style scoped>

    ul {
        list-style-type: none;
    }
    .bg-highlight {
        /* background-color: var(--vt-c-primary); */
        background-color: var(--vt-c-select-hover);
    }
</style>